<template>
    <div class="personalCenter">
        <h1 style="margin-bottom: 20px; text-align: center; font-size: 30px;">用 户 个 人 中 心</h1>
        <el-descriptions class="margin-top" :column="2" border style="description">

            <template slot="extra">
                <el-button type="primary" size="small" @click="openUpdatePass">修改密码</el-button>
                <el-button type="primary" size="small" @click="openUpdateInfo">更新个人信息</el-button>
            </template>

            <el-descriptions-item :contentStyle="{ 'text-align': 'center' }" :labelStyle="{ 'text-align': 'center' }">
                <template slot="label" style="cursor: pointer;">
                    <i class="el-icon-picture-outline"></i>
                    <span style="cursor: pointer;">头像</span>
                </template>
                <el-avatar style="margin: 0;" shape="square" :size="150"
                    :src="'http://localhost:8086/common/download/' + userInfo.avatar"></el-avatar>
            </el-descriptions-item>


            <el-descriptions-item :contentStyle="{ 'text-align': 'center' }" :labelStyle="{ 'text-align': 'center' }">
                <template slot="label">
                    <i class="el-icon-user"></i>
                    昵称
                </template>
                <span style="font-size: 30px; font-family: dakai; color: #616161;"> {{ userInfo.nickname }}</span>
            </el-descriptions-item>
            <el-descriptions-item :contentStyle="{ 'text-align': 'center' }" :labelStyle="{ 'text-align': 'center' }">
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    手机号
                </template>
                {{ userInfo.phone === '' || userInfo.phone == null ? "暂未填写" : userInfo.phone }}
            </el-descriptions-item>
            <el-descriptions-item :contentStyle="{ 'text-align': 'center' }" :labelStyle="{ 'text-align': 'center' }">
                <template slot="label">
                    <i class="el-icon-eleme"></i>
                    账号
                </template>
                {{ userInfo.username }}
            </el-descriptions-item>
            <el-descriptions-item :contentStyle="{ 'text-align': 'center' }" :labelStyle="{ 'text-align': 'center' }">
                <template slot="label">
                    <i class="el-icon-message"></i>
                    邮箱
                </template>
                <span>{{ (userInfo.email === '' || userInfo.email == null) ? "暂无邮箱" : userInfo.email }}</span>
            </el-descriptions-item>
            <el-descriptions-item :contentStyle="{ 'text-align': 'center' }" :labelStyle="{ 'text-align': 'center' }">
                <template slot="label">
                    <i class="el-icon-male"></i>
                    性别
                </template>
                <span>{{ (userInfo.gender === '' || userInfo.gender == null) ? "未设置" : userInfo.gender }}</span>
            </el-descriptions-item>
            <el-descriptions-item :contentStyle="{ 'text-align': 'center' }" :labelStyle="{ 'text-align': 'center' }">
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    家庭住址
                </template>
                <el-tag>{{ (userInfo.address === '' || userInfo.address == null) ? "暂无填写" : userInfo.address
                }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :contentStyle="{ 'text-align': 'center' }" :labelStyle="{ 'text-align': 'center' }">
                <template slot="label">
                    <i class="el-icon-user-solid"></i>
                    年级
                </template>
                <span>{{ userInfo.grade }}</span>
            </el-descriptions-item>
            <el-descriptions-item :contentStyle="{ 'text-align': 'center' }" :labelStyle="{ 'text-align': 'center' }">
                <template slot="label">
                    <i class="el-icon-user-solid"></i>
                    学院
                </template>
                <span>{{ userInfo.college }}</span>
            </el-descriptions-item>
            <el-descriptions-item :contentStyle="{ 'text-align': 'center' }" :labelStyle="{ 'text-align': 'center' }">
                <template slot="label">
                    <i class="el-icon-user-solid"></i>
                    专业
                </template>
                <span>{{ userInfo.major }}</span>
            </el-descriptions-item>

            <el-descriptions-item :contentStyle="{ 'text-align': 'center' }" :labelStyle="{ 'text-align': 'center' }">
                <template slot="label">
                    <i class="el-icon-user-solid"></i>
                    班级
                </template>
                <span>{{ userInfo.userClass === '' || userInfo.userClass == null ? "暂未完善" : userInfo.userClass }}</span>
            </el-descriptions-item>
        </el-descriptions>


        <!-- 更新密码 -->
        <el-dialog title="更新密码" @close="onClose('updatePassForm')" :visible.sync="passVisible" width="30%">
            <el-form :model="updatePassForm" :rules="rules" ref="updatePassForm">
                <el-form-item label="密码" prop="password" label-width="80px">
                    <el-input type="password" v-model="updatePassForm.password" autocomplete="off"
                        :style="{ width: '100%' }"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass" label-width="80px">
                    <el-input type="password" v-model="updatePassForm.checkPass" autocomplete="off"
                        :style="{ width: '100%' }"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="passVisible = false">取 消</el-button>
                <el-button type="primary" @click="UpdatePass('updatePassForm')">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog class="mydialog" title="更新个人信息" @close="onClose('updateForm')" :visible.sync="updateFormVisible"
            width="50%" top="2vh">
            <el-form ref="updateForm" :model="updateFormData" :rules="updateFormRules" size="medium" label-width="100px">
                <el-form-item label="头像" prop="avatar" required>
                    <el-upload ref="avatar" :action="avatarAction" :show-file-list="false" :on-success="handleAvatarSuccess"
                        :before-upload="avatarBeforeUpload" list-type="picture-card">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" width="100%" height="100%"
                            style="border-radius: 5px;">
                        <i v-else class="el-icon-plus avatar-uploader-icon" />
                        <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的文件</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="updateFormData.email" placeholder="请输入邮箱" clearable :style="{ width: '100%' }">
                    </el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="updateFormData.nickname" placeholder="请输入昵称" clearable :style="{ width: '100%' }">
                    </el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="updateFormData.phone" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable
                        prefix-icon='el-icon-mobile' :style="{ width: '100%' }"></el-input>
                </el-form-item>
                <el-form-item label="家庭住址" prop="address">
                    <el-input v-model="updateFormData.address" placeholder="请输入家庭住址" clearable :style="{ width: '100%' }">
                    </el-input>
                </el-form-item>
                <el-form-item label="班级" prop="userClass">
                    <el-input v-model="updateFormData.userClass" placeholder="请输入班级" clearable :style="{ width: '100%' }">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="updateFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleConfirm('updateForm')">确定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
export default {
    name: 'PersonalCenter',
    data() {

        var validatePassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.updatePassForm.checkPass !== '') {
                    this.$refs.updatePassForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validateCheckPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.updatePassForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            passVisible: false,
            updateFormVisible: false,
            userInfoCopy: {},
            imageUrl: "",
            imageName: "",
            //更新密码表单
            updatePassForm: {
                password: "",
                checkPass: "",
            },
            //更新密码表单验证规则
            rules: {
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validateCheckPass, trigger: 'blur' },
                ],
            },

            updateFormData: {
                avatar: null,
                email: undefined,
                nickname: undefined,
                phone: '',
                address: undefined,
                userClass: undefined
            },
            updateFormRules: {
                email: [{
                    required: true,
                    message: '请输入邮箱',
                    trigger: 'blur'
                }, {
                    pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,
                    message: '请输入正确的邮箱',
                    trigger: 'blur'
                }],
                nickname: [{
                    required: true,
                    message: '请输入昵称',
                    trigger: 'blur'
                }],
                phone: [{
                    required: true,
                    message: '请输入手机号',
                    trigger: 'blur'
                }, {
                    pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                    message: '手机号格式错误',
                    trigger: 'blur'
                }],
                address: [{
                    required: true,
                    message: '请输入家庭住址',
                    trigger: 'blur'
                }],
                userClass: [{
                    required: true,
                    message: '请输入班级',
                    trigger: 'blur'
                }],

            },
            avatarAction: 'http://localhost:8086/common/upload',



        }
    },
    props: {
        userInfo: Object,
    },
    methods: {
        openUpdatePass() {
            this.passVisible = true;
        },
        //更改密码
        UpdatePass(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.userInfoCopy = this.$props.userInfo;
                    this.userInfoCopy.password = this.updatePassForm.password;
                    this.axios.put("/user", this.userInfoCopy)
                        .then(res => {
                            if (res.code === 200) {
                                this.$emit("newUserInfo", this.userInfoCopy)
                                this.$message.success("更新成功")
                            } else {
                                this.$message.error(res.msg)
                            }
                            this.passVisible = false
                        })
                } else {
                    this.$message.error("请正确填写表单后在提交注册信息")
                    return false;
                }
            });
        },

        openUpdateInfo() {
            this.updateFormVisible = true;
            this.updateFormData = this.$props.userInfo;
        },
        handleConfirm(formName) {
            this.$refs[formName].validate(valid => {
                if (!valid)
                    return;
                this.axios.put("/user", this.updateFormData)
                    .then(res => {
                        if (res.code === 200) {
                            this.$emit("newUserInfo", this.updateFormData)
                            this.$message.success("修改完成，请刷新")
                        } else {
                            this.$message.error(res.msg)
                        }
                        this.updateFormVisible = false
                    })
            })
        },


        avatarBeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 2
            if (!isRightSize) {
                this.$message.error('文件大小超过 2MB')
            }
            return isRightSize
        },

        handleAvatarSuccess(res, file) {
            // 照片回显
            this.imageUrl = URL.createObjectURL(file.raw)
            this.updateFormData.avatar = res.data
        },


        //重置表单和校验效果
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        onClose(formName) {
            this.resetForm(formName);
        }
    }
}
</script>

<style scoped lang="scss">
.el-descriptions {
    width: 1200px;
    height: 400px;

    //  background-color: aqua;
    .el-upload__tip {
        line-height: 1.2;
    }



}

.mydialog ::v-deep {
    .el-dialog__body {
        padding-top: 5;
        padding-bottom: 8px;
    }
}
</style>
